<template>
<div>
    <div class="hot">
        热门推荐
    </div>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in recommendList" :key="item.id">
            <a href="javascript:;">
                 <div class="picbox mui-pull-left">
                    <img class="pic mui-pull-left" :src="item.imgUrl">
                 </div>
                <div class="content mui-pull-left">
                    <span>&nbsp;{{item.title}}</span>
                    <p class='mui-ellipsis'>&nbsp;{{item.desc}}</p>
                    <div class="c-price">
                        <span class="price"><em>￥</em>{{item.price}}</span>起
                    </div> 
                </div>
            </a>
        </li>
    </ul>
</div>
    
</template>
<script>
export default {
    name:"Recommend",
    data(){
        return{
            recommendList:[{
                id:"001",
                imgUrl:"http://img1.qunarzz.com/sight/p0/1901/5a/5a10cf85846813f8a3.img.jpg_200x200_ce922862.jpg",
                title:"南京新街口",
                desc:"能和心爱的人一起睡觉是一件",
                price:"40"
            },{
                id:"002",
                imgUrl:"http://img1.qunarzz.com/sight/p0/1512/95/9579bcb3e5a206cc90.water.jpg_200x200_aaa2ccea.jpg",
                title:"南京夫子庙",
                desc:"第一个五年计划",
                price:"50"
            },{
                id:"003",
                imgUrl:"http://img1.qunarzz.com/sight/p0/1505/f4/f455d92ba582f608.water.jpg_200x200_375e5775.jpg",
                title:"大连圣亚海洋世界",
                desc:"能和心爱的人一起睡觉是一件",
                price:"60"
            }]
        }
    }       
}
</script>
<style scoped>
    .hot{
        font-size: 0.28rem;
        margin: 0.16rem 0 0.16rem 0.3rem; 
    }
    .picbox{
        height: 1.8rem;
        width: 1.8rem;
    }
    .pic{
        width: 100%;
    }
    .content{
        line-height: 0.6rem;
        margin-left: 0.2rem;
        font-size: 0.32rem;
    }
    .content p{
        font-size: 0.28rem;
    }
    .c-price{
        font-size: 0.28rem;
        color:#8f8f94;
    }
    .price{
        font-size: 0.4rem;
        color: #ff8300;
    }
    .price em{
        font-size: 0.28rem;
        font-style: normal;
    }
</style>


